import React, { useRef, useEffect } from 'react';
import { View, Animated, StyleSheet, Easing } from 'react-native';

/**
 * JS 驱动的动画组件：
 * - 30个方块，每个方块拥有独立的透明度和垂直位移动画（基于同一核心动画值，保证同步性）
 * - 布局整体居中（垂直+水平），自适应换行，避免重叠
 */
const JSDrivenAnimation = () => {
  // 1. 初始化动画核心值（0 ↔ 1 循环）：复用该值实现所有方块的动画同步
  const animationValue = useRef(new Animated.Value(0)).current;

  // 2. 定义循环动画配置（适配30个方块的流畅动画）
  useEffect(() => {
    const loopAnimation = Animated.loop(
      Animated.sequence([
        // 阶段1：值从0到1，耗时800ms（自然的过渡速度）
        Animated.timing(animationValue, {
          toValue: 1,
          duration: 800,
          useNativeDriver: false, // JS 驱动（非原生驱动）
          easing: Easing.easeInOut, // 缓动效果更自然
        }),
        // 阶段2：值从1到0，耗时800ms
        Animated.timing(animationValue, {
          toValue: 0,
          duration: 800,
          useNativeDriver: false,
          easing: Easing.easeInOut,
        }),
      ])
    );

    // 启动动画
    loopAnimation.start();

    // 组件卸载时清理动画（防止内存泄漏）
    return () => loopAnimation.stop();
  }, [animationValue]);

  // 3. 动态生成每个方块的插值属性（适配30个方块的差异化动画效果）
  // 生成透明度插值（30个方块的透明度范围：0.2 ~ 0.9，避免超出1的上限）
  const getOpacity = (index) => {
    // 计算30个方块的透明度步长：(0.9 - 0.2) / 29 ≈ 0.0241
    const opacityStep = (0.9 - 0.2) / (30 - 1);
    const minOpacity = 0.2 + index * opacityStep;
    return animationValue.interpolate({
      inputRange: [0, 1],
      outputRange: [minOpacity, 1],
      extrapolate: 'clamp', // 防止值超出范围
    });
  };

  // 生成垂直位移插值（30个方块的位移范围：10 ~ 27.4px，移动幅度更合理）
  const getTranslateY = (index) => {
    // 计算30个方块的位移步长：(27 - 10) / 29 ≈ 0.6
    const translateStep = (27 - 10) / (30 - 1);
    const maxTranslate = 10 + index * translateStep;
    return animationValue.interpolate({
      inputRange: [0, 1],
      outputRange: [-maxTranslate, maxTranslate],
      extrapolate: 'clamp',
    });
  };

  // 4. 生成30个动画方块的数组
  const renderAnimatedBoxes = () => {
    const boxCount = 30; // 明确设置为30个方块
    return Array.from({ length: boxCount }).map((_, index) => (
      <Animated.View
        key={`animated-box-${index}`} // 必须添加唯一key
        style={[
          styles.box,
          {
            opacity: getOpacity(index),
            transform: [{ translateY: getTranslateY(index) }],
            // 每个方块渐变色差（30个方块颜色过渡更自然）
            backgroundColor: `rgb(97, ${180 + index * 1.2} , ${220 + index * 1})`,
          },
        ]}
      />
    ));
  };

  return <View style={styles.container}>{renderAnimatedBoxes()}</View>;
};

// 样式定义（核心修改：布局整体居中）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 横向排列
    flexWrap: 'wrap', // 自动换行
    justifyContent: 'center', // 水平居中
    alignItems: 'center', // 垂直居中（单行）
    alignContent: 'center', // 换行后行之间居中（关键）
    backgroundColor: '#f5f5f5',
    padding: 10, // 内边距防止贴边
  },
  box: {
    width: 40, // 适配30个方块的尺寸
    height: 40,
    borderRadius: 8, // 圆角优化
    margin: 4, // 微调间距，避免重叠
  },
});

export default JSDrivenAnimation;


